<template>
  <div class="communication"
       v-if="dialogShow">
    <div class="content">
      <div class="title">
        PROFESSIONAL PHARMACEUTICAL <br /> CONSULTATION IS AT YOUR SERVICE <br /> AROUND THE CLOCK
      </div>
      <div class="info">If you have any questions about medication, we provide a variety of convenient consultation channels at your disposal. You can scan the code through WeChat, call the 24-hour free hotline, click online consultation to contact us, and the professional team will answer you 24 hours a day.</div>
      <div class="wxlist">
        <div class="wx_card">
          <img src="@/static/images/wxkf/wxkf.png"
               class="wechat_qr_code" />
          <div class="wechat_info">Scan with WeChat</div>
          <div class="method">Method 1</div>
        </div>
        <div class="wx_card">
          <img src="@/static/images/wxkf/wxkf.png"
               class="wechat_qr_code" />
          <div class="wechat_info">Scan with WeChat</div>
          <div class="method">Method 2</div>
        </div>
      </div>
      <div class="tip">We are always with you in your Medication Management. Whether it is daily medication consultation or urgent medical scenarios, our professional team will provide you with reliable pharmaceutical guidance with a rigorous attitude and professional knowledge, and look forward to your call or message.</div>
      <img src="@/static/images/about/cross.png"
           class="cross"
           @click="cross()" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    cross () {
      this.dialogShow = !this.dialogShow;
      this.$emit('update:dialogShow', this.dialogShow)
    }
  }
}
</script>

<style lang="scss" scoped>
@media (max-width: 1400px) {
  .communication {
    position: fixed;
    right: 100px !important;
  }
}
.communication {
  position: fixed;
  top: 8%;
  right: 30%;
  left: 30%;
  .content {
    background: #f5f8fd;
    border-radius: 34px;
    padding: 72px 72px 92px 72px;
    width: 840px;
    box-sizing: border-box;
    position: relative;
    .title {
      font-weight: 900;
      font-size: 22px;
      color: #0041a3;
      line-height: 36px;
    }
    .info {
      font-weight: 400;
      font-size: 13px;
      color: #2e343e;
      line-height: 20px;
      margin-top: 24px;
    }
    .wxlist {
      display: flex;
      justify-content: space-between;
      margin-top: 48px;
      padding: 0 44px;
      .wx_card {
        width: 269px;
        background: linear-gradient(
          180deg,
          #e8efff 0%,
          rgba(232, 239, 255, 0.5) 100%
        );
        border-radius: 24px;
        position: relative;
        text-align: center;
        padding-bottom: 69px;
        .wechat_qr_code {
          margin-top: 61px;
          border: 7px solid #ffffff;
          width: 134px;
          height: 134px;
        }
        .wechat_info {
          font-weight: bold;
          font-size: 20px;
          color: #2e343e;
          margin-top: 47px;
        }
        .method {
          position: absolute;
          width: 81px;
          background: linear-gradient(
            135deg,
            #dddafd 0%,
            #5f6bf6 51%,
            #0041a3 95%
          );
          border-radius: 125px 84px 84px 0px;
          top: -15px;
          left: 0px;
          text-align: center;
          font-weight: bold;
          font-size: 12px;
          color: #ffffff;
          line-height: 30px;
        }
      }
    }
    .tip {
      margin-top: 46px;
      font-weight: 400;
      font-size: 13px;
      color: #616469;
      line-height: 20px;
    }
    .cross {
      position: absolute;
      width: 33px;
      height: 33px;
      right: 40px;
      top: 40px;
      cursor: pointer;
    }
  }
}
</style>